import React, { useState } from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  DatePicker,
} from 'antd';
import { connect } from 'react-redux'
import { FormAction, ShowModalAction } from '@/store/actionCreator'

const FormSizeDemo = (props) => {
  const { formResultSubmit, showModal } = props;
  const onFinish = (val) => {
    formResultSubmit(val)
    showModal(false)
  }

  return (
    <div>
      <Form
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 14,
        }}
        onFinish={onFinish}
      >
        <Form.Item label="标题"
          name="title"
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="作者"
          name="author"
        >
          <Input />
        </Form.Item>
        <Form.Item label="内容" name="content">
          <Input type="textarea" />
        </Form.Item>

        <Form.Item label="身份选择" name="userid">
          <Select>
            <Select.Option value="0">超级管理员</Select.Option>
            <Select.Option value="1">管理员</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="创建日期" name="createTime">
          <DatePicker />
        </Form.Item>
        <Form.Item >
          <Button type="primary" htmlType="submit">
            提交按钮
            </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

const mapAction = (dispatch) => {
  return {
    formResultSubmit(val) {
      const action = FormAction(val)
      dispatch(action)
    },
    showModal(val) {
      const action = ShowModalAction(val)
      dispatch(action)
    }
  }
}

export default connect(null, mapAction)(FormSizeDemo);